import { defineConfig } from 'vite'
import { readdir } from 'fs'
import { resolve, extname } from 'path'
import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin';
import includeHtml from './src/utils/includeHtml.js'
import autoprefixer from 'autoprefixer'

// 路由对象，自动读取根目录下的所有.html文件
const inputList: any = {};

readdir(resolve(__dirname), (err, files) => {
  if (err) {
    return console.error('读取目录出错:', err);
  }

  files.forEach(file => {
    if (extname(file) === '.html') {
      const key = file.replace(/\.html$/i, '');
      const value = resolve(__dirname, file);

      inputList[key] = value;
    }
  });

});

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? './' : '/',
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  },
  // 插件
  plugins: [
    // 存放公共html
    includeHtml(),
  ],
  css: {
    // 在开发过程中是否启用 sourcemap
    devSourcemap: true,
    postcss: {
      plugins: [
        postcsspxtoviewport8plugin({
          unitToConvert: 'px',
          // 视口宽度
          viewportWidth: file => {
            let num = 1920;
            if (file.indexOf('pad') !== -1) {
              num = 1600;
            }
            if (file.indexOf('mobile') !== -1) {
              num = 414;
            }
            return num;
          },
          // 视口高度
          viewportHeight: 1080,
          // 保留的小数位数
          unitPrecision: 3,
          // 视口单位，可选值为 vw、vh、vmin 或 vmax
          viewportUnit: 'vw',
          // 不需要转换的 CSS 选择器，可以是字符串、数组或正则表达式
          selectorBlackList: ['body'],
          // 最小像素值
          minPixelValue: 2,
          // 是否在媒体查询中也进行转换
          mediaQuery: true,
          // 需要排除的文件或正则表达式匹配的文件路径
          exclude: [],
          // 需要包含的文件或正则表达式匹配的文件路径
          include: [],
          // 是否在横屏模式下也进行转换
          landscape: false,
          // 横屏模式下使用的视口单位，可选值为 vw、vh
          landscapeUnit: 'vw',
          // 横屏模式下的视口宽度
          landscapeWidth: 768,
          // 字体大小的视口单位，通常与 viewportUnit 保持一致
          fontViewportUnit: 'vw',
          // 是否替换原始的px值（而不是添加新的视口单位属性）
          replace: true
        }),
        autoprefixer({
          // 自动添加前缀
          overrideBrowserslist: [
            'Android 4.1',
            'iOS 7.1',
            'Chrome > 31',
            'ff > 31',
            'ie >= 8',
            //'last 2 versions', // 所有主流浏览器最近2个版本
          ],
          grid: true,
        })
      ],
    },
  },
  // 打包配置项
  build: {
    // 生成打包后文件夹名称
    outDir: 'build',
    // 资源文件夹名称
    assetsDir: 'dist',
    // css是否压缩
    cssMinify: false,
    // 小于kb的图片是否转换base64格式
    assetsInlineLimit: 0,
    rollupOptions: {
      // 路由
      input: inputList,
      output: {
        chunkFileNames: 'dist/js/layout-[hash].js',
        entryFileNames: 'dist/js/layout-[hash].js',
        //静态资源输出配置
        assetFileNames(assetInfo: any) {
          //css文件单独输出到css文件夹
          if (assetInfo.name.endsWith(".css")) {
            return `dist/css/layout-[hash].css`;
          }
          //图片文件单独输出到img文件夹
          else if (
            [".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp"].some((ext) =>
              assetInfo.name.endsWith(ext)
            )
          ) {
            return `dist/images/[name].[ext]`;
          }
          //
          else if (
            [".woff2", ".woff", ".ttf", ".eot"].some((ext) =>
              assetInfo.name.endsWith(ext)
            )
          ) {
            return `dist/fonts/[name].[ext]`;
          }
          //其他资源输出到assets文件夹
          else {
            return `dist/assets/[name].[ext]`;
          }
        }
      },
    },
  }
})